<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="card7.css" />
    <link
      href="https://fonts.googleapis.com/css2?family=Pacifico&family=Poppins:wght@500&display=swap"
      rel="stylesheet"
    />
  </head>
  <body>
    <div class="profile-card">
      <div class="profile-header">
        <img
          src="https://i.postimg.cc/6qWNGrHS/pfpanimeboy.jpg"
          alt="Profile Picture"
          class="profile-pic"
        />
        <h2>Osura De Silva</h2>
        <p>@osu_han</p>
      </div>
      <div class="profile-body">
        <p>
          I am a passionate web developer getting into contributing to open
          source code.
        </p>
        <div class="categories">
          <span class="badge">Games</span>
          <span class="badge">Music</span>
          <span class="badge">Movies</span>
          <span class="badge">Football</span>
        </div>
        <div class="signature-text">Osura Hansaja De Silva</div>
      </div>
      <div class="profile-footer">
        <button class="action-btn follow-btn">Follow</button>
        <button class="action-btn message-btn">Message</button>
        <div class="follower-info">
          <span>278 Following</span>
          <span>345 Followers</span>
        </div>
      </div>
    </div>
  </body>
</html>
